<template>
  <div class="search-header">
    <div v-for="(item, index) in searchList" :key="index" class="input-model">
      <div v-for="(list, i) in item.lists" :key="i" class="input">
        <label>{{ list.title }}：</label>
        <el-input v-if="list.type === 'input'" v-model="params[list.prop]" />
        <el-select v-if="list.type === 'select'" v-model="params[list.prop]" />
        <el-date-picker
          v-if="list.type === 'datePicker'"
          v-model="params[list.prop]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </div>
    </div>
    <div class="btns">
      <el-button type="primary" :loading="loading" @click="search">搜索</el-button>
      <el-button @click="setEmpty">重置</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SearchHeader',
  props: {
    searchList: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      params: {}
    }
  },
  mounted() {},
  methods: {
    search() {
      this.$emit('handleSearch', this.params)
    },
    setEmpty() {
      this.params = {}
      this.$emit('handleEmpty')
    }
  }
}
</script>
<style lang="scss">
.search-header {
  border-bottom: 4px solid rgba(220, 223, 230, 0.28);
  padding-bottom: 20px;
  .input-model {
    display: flex;
    align-items: center;
    > .input {
      width: 33.33%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px 10px 10px;
      border: 1px solid #dcdfe6;
      padding: 5px 10px;
      box-sizing: border-box;
      max-width: 500px;
      > label {
        word-break: keep-all;
        color: #97a8be;
        font-weight: 400;
        font-size: 14px;
      }
      > .el-select {
        width: 100%;
        input {
          border: 0;
        }
      }
      > .el-input {
        input {
          border: 0;
        }
      }
      > .el-date-editor--daterange {
        width: 100%;
        border: 0;
      }
    }
  }
  .btns {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
    > .el-button {
      &:first-child {
        margin-left: 10px;
      }
    }
  }
}
</style>
